<template>
  <div style="height: 170px; margin-top: 60px; text-align: center">
    XXXX管理系统
  </div>
  <div style="text-align: center">
    姓名：<input v-model="userInfo.username" />
    <br />
    密码：<input v-model="userInfo.password" />
    <br />
    <button @click="submit">提交</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

import API from '../utils/api';
import { ACCESS_TOKEN, ROLE, MENUS } from '../config/constants'
import manageRoute from '../router/dynamic-router';

const router = useRouter();
const userInfo = reactive({
  username: '',
  password: ''
});

console.log('login 页面');


const submit = () => {
  let menus = [];
  localStorage.setItem(ROLE, userInfo.username);
  if (userInfo.username == 'admin') {
    menus = ["home", "about", "manage"];
    localStorage.setItem(ACCESS_TOKEN, 'this-is-token-admin');
    router.addRoute('Layout', manageRoute);
  } else {
    menus = ["home", "about"];
    localStorage.setItem(ACCESS_TOKEN, 'this-is-token-visitor');
  }
  localStorage.setItem(MENUS, JSON.stringify(menus));
  router.push('/home');

  // server 拿取
  // API.getLogin(userInfo).then((res) => {
  //   localStorage.setItem(ACCESS_TOKEN, res.data.accessToken);
  //   localStorage.setItem(ROLE, res.data.role);
  //   localStorage.setItem(MENUS, JSON.stringfy(res.data.menus));
  //   if (res.data.role === 'admin') {
  //     router.addRoute('Layout', manageRoute);
  //   }
  //   router.push('/home');
  // })
}

</script>

<style>

</style>